<script setup>
import { ElButton, ElRow, ElCol, ElInput, ElMessage } from 'element-plus'
import { onUnmounted, ref } from 'vue'
import http from '../utils/http'
import { useConfigStore } from '../stores/config'
import { useStatusStore } from '../stores/status'
import { useDeviceStore } from '../stores/device'

const configStore = useConfigStore()
const statusStore = useStatusStore()
const deviceStore = useDeviceStore()

const config = ref({
    ...configStore,
})

const handleConfigChanged = async (key) => {
    const globalConfigKeys = ['port', 'baudrate', 'timeout']
    if (globalConfigKeys.includes(key)) {
        statusStore.closeSerial()
    }

    const success = await configStore.setValue(key, config.value[key])
    if (success) {
        ElMessage.success('修改成功')
        if (key === 'max_device_num' && statusStore.serialOpened) {
            await deviceStore.initDevices(configStore.max_device_num)
        }
    } else {
        ElMessage.error('修改失败')
    }
}
</script>

<template>
    <div>
        <el-row class="form-item">
            <el-col :span="4">串口</el-col>
            <el-col :span="10"><el-input v-model="config.port" /></el-col>
            <el-col :offset="1" :span="4"
                ><el-button @click="handleConfigChanged('port')"
                    >保存</el-button
                ></el-col
            >
        </el-row>
        <el-row class="form-item">
            <el-col :span="4">波特率</el-col>
            <el-col :span="10"><el-input v-model="config.baudrate" /></el-col>
            <el-col :offset="1" :span="4"
                ><el-button @click="handleConfigChanged('baudrate')"
                    >保存</el-button
                ></el-col
            >
        </el-row>
        <el-row class="form-item">
            <el-col :span="4">超时时间</el-col>
            <el-col :span="10"
                ><el-input v-model="config.timeout">
                    <template #append>秒</template>
                </el-input></el-col
            >
            <el-col :offset="1" :span="4"
                ><el-button @click="handleConfigChanged('timeout')"
                    >保存</el-button
                ></el-col
            >
        </el-row>
        <el-row class="form-item">
            <el-col :span="4">轮询次数</el-col>
            <el-col :span="10"
                ><el-input v-model="config.ask_times"
                    ><template #append>次</template>
                </el-input></el-col
            >
            <el-col :offset="1" :span="4"
                ><el-button @click="handleConfigChanged('ask_times')"
                    >保存</el-button
                ></el-col
            >
        </el-row>
        <el-row class="form-item">
            <el-col :span="4">轮询间隔</el-col>
            <el-col :span="10"
                ><el-input v-model="config.ask_interval"
                    ><template #append>秒</template>
                </el-input></el-col
            >
            <el-col :offset="1" :span="4"
                ><el-button @click="handleConfigChanged('ask_interval')"
                    >保存</el-button
                ></el-col
            >
        </el-row>
        <el-row class="form-item">
            <el-col :span="4">最大设备数量</el-col>
            <el-col :span="10"
                ><el-input v-model="config.max_device_num"
                    ><template #append>个</template>
                </el-input></el-col
            >
            <el-col :offset="1" :span="4"
                ><el-button @click="handleConfigChanged('max_device_num')"
                    >保存</el-button
                ></el-col
            >
        </el-row>
    </div>
</template>

<style scoped>
.form-item {
    margin-bottom: 20px;
}
</style>
